﻿
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="color-scheme" content="light dark">
    <title>Event Counter Visualization</title>
    <style>
        :root {
            color-scheme: dark light;
        }

        body {
            font-family: Segoe UI,SegoeUI,Segoe WP,Helvetica Neue,Helvetica,Tahoma,Arial,sans-serif;
            font-weight: 400;
            text-rendering: optimizeLegibility;
            -webkit-font-smoothing: antialiased;
        }

        hr {
            border-top: 3px double gray;
        }

        .line {
            fill: none;
            stroke: steelblue;
            stroke-width: 1.5px;
        }

        .zoom {
            cursor: move;
            fill: none;
            pointer-events: all;
        }
    </style>
</head>

<body>
    <div id="content">
    </div>
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <script>

        // REPLACE-DATA-HERE

        var content = document.getElementById("content");


        for (i = 0; i < data.length; i++) {
            var xmlns = "http://www.w3.org/2000/svg";

            var blockElement = document.createElement("div");
            blockElement.style.margin = "20px 20px 20px 20px";

            var textElement = document.createElement("div");
            textElement.style.width = "960px";
            textElement.style.textAlign = "center";

            var svgElem = document.createElementNS(xmlns, "svg");
            svgElem.setAttributeNS(null, "width", 960);
            svgElem.setAttributeNS(null, "height", 500);

            textElement.appendChild(document.createTextNode(data[i].name));
            content.appendChild(blockElement);
            blockElement.appendChild(textElement);
            blockElement.appendChild(svgElem);

            plot(d3.select(svgElem), data[i].points);
        }

        function plot(svg, data) {
            var margin = {
                top: 20,
                right: 20,
                bottom: 110,
                left: 40
            },
                margin2 = {
                    top: 430,
                    right: 20,
                    bottom: 30,
                    left: 40
                },
                width = +svg.attr("width") - margin.left - margin.right,
                height = +svg.attr("height") - margin.top - margin.bottom,
                height2 = +svg.attr("height") - margin2.top - margin2.bottom;

            var x = d3.scaleTime().range([0, width]),
                x2 = d3.scaleTime().range([0, width]),
                y = d3.scaleLinear().range([height, 0]),
                y2 = d3.scaleLinear().range([height2, 0]);

            var xAxis = d3.axisBottom(x),
                xAxis2 = d3.axisBottom(x2),
                yAxis = d3.axisLeft(y);

            var brush = d3.brushX()
                .extent([
                    [0, 0],
                    [width, height2]
                ])
                .on("brush end", brushed);

            var zoom = d3.zoom()
                .scaleExtent([1, Infinity])
                .translateExtent([
                    [0, 0],
                    [width, height]
                ])
                .extent([
                    [0, 0],
                    [width, height]
                ])
                .on("zoom", zoomed);

            var line = d3.line()
                .x(function (d) {
                    return x(d.X);
                })
                .y(function (d) {
                    return y(d.Y);
                });

            var line2 = d3.line()
                .x(function (d) {
                    return x2(d.X);
                })
                .y(function (d) {
                    return y2(d.Y);
                });

            var clip = svg.append("defs").append("svg:clipPath")
                .attr("id", "clip")
                .append("svg:rect")
                .attr("width", width)
                .attr("height", height)
                .attr("x", 0)
                .attr("y", 0);

            var Line_chart = svg.append("g")
                .attr("class", "focus")
                .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
                .attr("clip-path", "url(#clip)");


            var focus = svg.append("g")
                .attr("class", "focus")
                .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

            var context = svg.append("g")
                .attr("class", "context")
                .attr("transform", "translate(" + margin2.left + "," + margin2.top + ")");

            x.domain(d3.extent(data, function (d) {
                return d.X;
            }));
            y.domain([0, d3.max(data, function (d) {
                return d.Y;
            })]);
            x2.domain(x.domain());
            y2.domain(y.domain());


            focus.append("g")
                .attr("class", "axis axis--x")
                .attr("transform", "translate(0," + height + ")")
                .call(xAxis);

            focus.append("g")
                .attr("class", "axis axis--y")
                .call(yAxis);

            Line_chart.append("path")
                .datum(data)
                .attr("class", "line")
                .attr("d", line);

            context.append("path")
                .datum(data)
                .attr("class", "line")
                .attr("d", line2);


            context.append("g")
                .attr("class", "axis axis--x")
                .attr("transform", "translate(0," + height2 + ")")
                .call(xAxis2);

            context.append("g")
                .attr("class", "brush")
                .call(brush)
                .call(brush.move, x.range());

            svg.append("rect")
                .attr("class", "zoom")
                .attr("width", width)
                .attr("height", height)
                .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
                .call(zoom);

            function brushed() {
                if (d3.event.sourceEvent && d3.event.sourceEvent.type === "zoom") return; // ignore brush-by-zoom
                var s = d3.event.selection || x2.range();
                x.domain(s.map(x2.invert, x2));
                Line_chart.select(".line").attr("d", line);
                focus.select(".axis--x").call(xAxis);
                svg.select(".zoom").call(zoom.transform, d3.zoomIdentity
                    .scale(width / (s[1] - s[0]))
                    .translate(-s[0], 0));
            }

            function zoomed() {
                if (d3.event.sourceEvent && d3.event.sourceEvent.type === "brush") return; // ignore zoom-by-brush
                var t = d3.event.transform;
                x.domain(t.rescaleX(x2).domain());
                Line_chart.select(".line").attr("d", line);
                focus.select(".axis--x").call(xAxis);
                context.select(".brush").call(brush.move, x.range().map(t.invertX, t));
            }

            function type(d) {
                d.X = d.X;
                d.Y = +d.Y;
                return d;
            }
        }
    </script>
</body>

</html>